<template>
    <div class="admin-add">
        <el-form ref="adminAddForm" :model="adminAddParams" label-width="100px">
            <el-form-item label="管理员名称" prop="adminname" :rules="[{ required: true, message: '请输入管理员名称', triggle: 'blur' }]">
                <el-input v-model="adminAddParams.adminname"></el-input>
            </el-form-item>
            <el-form-item label="管理员密码" prop="password" :rules="[{ required: true, message: '请输入管理员密码', triggle: 'blur' }]">
                <el-input v-model="adminAddParams.password"></el-input>
            </el-form-item>
            <el-form-item label="管理员等级" prop="role" :rules="[{ required: true, message: '请选择输入管理员等级', triggle: 'blur' }]">
                <el-select v-model="adminAddParams.role" clearable placeholder="请选择" @change="adminLevelChangeHandler">
                    <el-option label="请选择管理员等级" value=""></el-option>
                    <el-option label="超级管理员" value="1"></el-option>
                    <el-option label="普通管理员" value="2"></el-option>
                    <el-option label="普通用户" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="管理员等级" prop="role" :rules="[{ require: true, message: '请选择输入管理员等级', triggle: 'blur' }]">
                <el-tree ref="tree" :data="menus" :props="renderProp" show-checkbox node-key="path">
                </el-tree>
            </el-form-item>
            <el-form-item>
                <el-button @click="addAdminHandler">新增</el-button>
                <el-button @click="resetHandler">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { menus } from "@/router";
import { addAdminAPI } from "@/api/admin"
export default {
    name: "AdminAddView",
    data() {
        return {

            adminAddParams: {
                adminname: "",
                password: "",
                role: "",
                checkedKeys: [],  // 用户允许访问的菜单列表
            },
            menus,
            renderProp: {
                label: "label",
                children: "children"
            }
        }
    },
    methods: {
        adminLevelChangeHandler(level) {
            console.log("level", level);
            if (level > 0) {
                // 1  超级管理员  访问所有
                // 2. 普通管理员  除人员新增
                // 3. 普通用户    各种展示

                var enumLevel = {
                    "1": ['/home', '/admin', '/goods', '/banner', '/plugins'],
                    "2": ['/home', '/admin/list', '/goods', '/banner', '/plugins'],
                    "3": ['/home', '/goods/list', '/banner/show', '/banner/list', '/plugins'],
                }

                var list = enumLevel[level];
                this.$refs.tree.setCheckedKeys(list);
            }
        },
        addAdminHandler() {
            // 查看选中el-tree
            // console.log("选中的节点树",this.$refs.tree.getCheckedKeys());

            // this.$refs.tree.setCheckedKeys(["/home","/admin"])
            // this.$refs.tree.setCheckedKeys(["/home","/admin/list"])
            // this.$refs.tree.setCheckedKeys([]);

            this.$refs.adminAddForm.validate(async (bool) => {
                if (bool) {
                    console.log("bool", bool);
                    // var checkedKeys = this.$refs.tree.getCheckedKeys();
                    this.adminAddParams.checkedKeys = this.$refs.tree.getCheckedKeys();

                    try {
                        var res = await addAdminAPI(this.adminAddParams);
                        console.log("新增成功", res);
                        this.$message.success("新增成功");
                        this.resetHandler();
                        
                    } catch (err) {
                        this.$message.error(err.message);
                    }
                }


            })
        },
        resetHandler() {
            this.$refs.adminAddForm.resetFields();
            this.$refs.tree.setCheckedKeys([]);
        }
    },
    mounted() {
        console.log("菜单", this.menus);
    }
}
</script>

<style lang="scss" scoped></style>